import React from 'react';
import {Modal, Descriptions, Rate, Tag, Row, Col} from 'antd';

const WorkDetail = ({ visible, onClose, workData }) => {
    if (!workData) {
        return null;
    }
    const getStatusTag = (status) => {
        const statusMap = {
            0: { color: 'blue', text: '待审核' },
            1: { color: 'green', text: '审核通过' },
            2: { color: 'red', text: '审核未通过' },
            3: { color: 'orange', text: '已招满' }
        };
        return statusMap[status] || { color: 'default', text: '未知状态' };
    };

    const { color, text } = getStatusTag(workData.status);

    return (
        <Modal
            title="岗位详情"
            visible={visible}
            onCancel={onClose}
            footer={null}
            width={1100}
        >
            <Descriptions layout="vertical" bordered>
                <Descriptions.Item label="岗位名称">{workData.job_title}</Descriptions.Item>
                <Descriptions.Item label="远程办公">{workData.remote ? '是' : '否'}</Descriptions.Item>
                <Descriptions.Item label="工作期限">{workData.duration}</Descriptions.Item>
                <Descriptions.Item label="岗位要求" span={3}>{workData.job_requirements}</Descriptions.Item>
                <Descriptions.Item label="岗位描述" span={3}>{workData.job_description}</Descriptions.Item>
                <Descriptions.Item label="急招程度"><Rate allowHalf disabled defaultValue={Number(workData.popularity_rating)} /></Descriptions.Item>
                <Descriptions.Item label="薪资待遇">{workData.salary}</Descriptions.Item>
                <Descriptions.Item label="福利待遇">{workData.benefits}</Descriptions.Item>
                <Descriptions.Item label="状态"><Tag color={color}>{text}</Tag></Descriptions.Item>
            </Descriptions>
        </Modal>
    );
};

export default WorkDetail;
